{% extends 'base.html' %}

{% block content %}


<link href="/static/assets/plugins/bootstrap-table/dist/bootstrap-table.min.css" rel="stylesheet" type="text/css">
<link href="/static/assets/plugins/select2/select2.css" rel="stylesheet" type="text/css" />
<link href="/static/assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.css"  rel="stylesheet" type="text/css" />
<script src="/static/assets/plugins/select2/select2.min.js"></script>
<script src="/static/assets/plugins/select2/select2_locale_zh-CN.js"></script>
<script src="/static/assets/js/bootstrap-selectsplitter.min.js"></script>
<script src="/static/assets/plugins/bootstrap-select/dist/js/bootstrap-select.min.js" type="text/javascript"></script>
<script src="/static/assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
<script src="/static/assets/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" type="text/javascript"></script>
<script src="/static/assets/plugins/bootstrap-table/dist/bootstrap-table.min.js"></script>

<style>
   .btn_margin{
      margin-right:4px !important;
   }
   .word-break{
          word-break:break-all !important;
          word-wrap: break-word !important;
   }
   .tr_color_1{
     background-color:rgb(173,216,230,0.9) !important;
   }
   .tr_color_2{
     background-color:rgb(176,196,222,0.9) !important;
   }
   .btn_disable{
         color:#ffffff !important;
         background-color: #778899 !important;
         border: 1px solid #778899 !important;
   }

/*
   #table {
       table-layout:fixed;
   }
   #table td{
       width:100% !important;
       word-break:keep-all !important;
       white-space:nowrap !important;
       overflow:hidden !important;
       text-overflow:ellipsis !important;
       -o-text-overflow:ellipsis !important;
       -icab-text-overflow: ellipsis !important;
       -khtml-text-overflow: ellipsis !important;
       -moz-text-overflow: ellipsis !important;
       -webkit-text-overflow: ellipsis !important;
   }
*/
</style>
<div class="container">
   <!-- Page-Title -->
    <div class="row ">
            <div class="col-sm-12">
                <h4 class="page-title">项目管理</h4>
                <ol class="breadcrumb">
                    <li>
                        <a href="#">项目管理</a>
                    </li>
                    <li class="active">
                        <a href="/app/project/">项目列表</a>
                    </li>

                </ol>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="card-box">
                        <div class="row">
                                <div class="col-sm-4" style="float:right">
                                    <form>
                                        <div class="input-group">
                                            <input type="text" id="search" name="search" class="form-control" placeholder="模糊搜索">
                                            <span class="input-group-btn">
                                            <button type="button" onclick="search_filter();" class="btn waves-effect waves-light btn-primary"  ><i class="fa fa-search"></i></button>

                                            </span>
                                        </div>
                                    </form>
                                 </div>
                            <div class="col-sm-12">
                                <div class="bootstrap-table">
                                    <div class="table-responsive">
                                        <table id="ipbind_list_table" class="bootstrap-table table-responsive"></table>
                                    </div>
                                </div>

                            </div>
                        </div>


            </div>
        </div>
    </div>
    </div>

    <div id="del_confirm_modal"  class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog" style="width:600px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">操作确认</h4>
            </div>
            <div class="form-group" >
                </br></br>
                <label class="col-md-1 control-label" style="padding-top:5px" for="state-warning"><span style="color:red">* </span>IP</label>
                <div class="col-md-10">
                    <input id="ipaddr"  type="text" class="form-control" name="ipaddr">
                </div>
            </div>

            <div class="modal-body">
                </br></br>
                 <div class="row">
                   <div class="col-md-12" >
                          <p style="text-align: center">请您确认是否删除相关记录</p>
                   </div>
                </div>
            </div>
            <div class="modal-footer" style="text-align: center">
                <input type="hidden" id="mac" />
                <input type="hidden" id="zone" />
                <input type="hidden" id="place" />
                <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">取消</button>
                <button type="button" id="del_confirm" class="btn btn-info waves-effect waves-light" onclick="binduser_delete()">确定</button>
            </div>
        </div>
    </div>
</div>

    <div id="iplinerules_detail_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">线路修改</h4>
            </div>
            <form id="create_form"  role="form" method="POST" enctype="multipart/form-data">
                {% csrf_token  %}
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                            <div class="form-group" >
                                <label class="col-md-2 control-label" style="padding-top:5px" for="state-warning"><span style="color:red">* </span>备注名</label>
                                <div class="col-md-10">
                                    <input id="comment"  type="text" class="form-control" name="comment">
                                </div>
                            </div>

                            <div class="form-group" >
                                </br></br>
                                <label class="col-md-2 control-label" style="padding-top:5px" for="state-warning"><span style="color:red">* </span>IP</label>
                                <div class="col-md-10">
                                    <input id="line_ip"  type="text" class="form-control" name="line_ip">
                                </div>
                            </div>

                            <div class="form-group" >
                                </br></br>
                                <label class="col-sm-2 control-label" style="padding-top:5px;"  for="state-danger"><span style="color:red">* </span>新出口</label>
                                <div class="col-sm-10">
                                     <select id="NewInterfaces" name="NewInterfaces" class="form-control">
                                         <option  value="GE1">电信200M</option>
                                         <option  value="GE2">联通100M</option>
                                         <option  value="GE3">联通20M</option>
                                         <option  value="GE4">移动100M</option>
                                     </select>
                                </div>
                            </div>



                        </br></br>
                    </div>
                </div>

            <div class="modal-footer" style="text-align: center">
                <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">取消</button>
                <button type="button"  class="btn btn-info waves-effect waves-light" onclick="ChangeIPRules()">修改</button>
            </div>
            </div>
            </form>
        </div>
    </div>
    </div>




</div>


<script>
    var responseHandler = function (e) {
      if (e.data && e.data.count > 0) {
          return { "rows": e.data.rows, "total": e.data.count };
      }
      else {
          return { "rows": [], "total": 0 };
      }
    };
    var hiddenFormatter = function(value, row, index) {
        return '<span data-toggle="tooltip" data-placement="left" title="'+value+'">'+value+'</span>';
    };

    function operateFormatter(value, row, index) {
        return [
                '<button type="button" class="change btn btn-info btn-xs">线 路</button>',
                '<button type="button" class="delete btn btn-danger btn-xs">删 除</button>',
        ].join('');
    }
    window.operateEvents = {
        'click .change': function (e, value, row, index) {
            <!--console.log(row)-->
            $("#line_ip").val(row.ipaddr);
            $('#line_ip').attr('readonly', true);
            $("#comment").val(row.note);
            $("#iplinerules_detail_modal").modal();
        },


        'click .delete': function (e, value, row, index) {
            <!--console.log(row)-->
            $("#ipaddr").val(row.ipaddr);
            $("#mac").val(row.mac);
            $("#zone").val(row.zone);
            $("#place").val(row.place);
            $('#ipaddr').attr('readonly', true);
            $("#del_confirm_modal").modal();
        }
    };

    function ChangeIPRules(){
    var form_data = new FormData(document.getElementById("create_form"));
    $("#con-close-modal").hide();
    $("#loading_modal").modal();
    $.ajax({
        method:'POST',
        url:"/network/changeipline/",
        dataType: 'json',
        data:form_data,
        processData:false,
        contentType:false,
        cache: false,
        success:function(result){
                var status=result.status;
                var msginfo=result.msginfo;
                if(msginfo){
                   $.Notification.autoHideNotify('success','top right','系统通知', msginfo);
                   $("#iplinerules_detail_modal").modal('hide');
                }
                else{
                   var msgerror=result.msgerror;
                   $.Notification.autoHideNotify('error','top right','系统通知', msgerror);
                   $("#iplinerules_detail_modal").modal('hide');
                };
        },
        });

    }


    function binduser_delete(){
        var mac=$("#mac").val();
        var ipaddr=$("#ipaddr").val();
        var zone=$("#zone").val();
        var place=$("#place").val();
        $.ajax({
            method:'POST',
            url:"/network/ipbind_list/",
            dataType: 'json',
            data: {
            "mac":mac,
            "ipaddr":ipaddr,
            "zone":zone,
            "place":place,
            },
            success:function(result){
                    var status=result.status;
                    var msginfo=result.msginfo;
                    if(msginfo){
                       $.Notification.autoHideNotify('success','top right','系统通知', msginfo);
                       $("#del_confirm_modal").modal('hide');
                       $('#ipbind_list_table').bootstrapTable("refresh");
                    }
                    else{
                       var msgerror=result.msgerror;
                       $.Notification.autoHideNotify('error','top right','系统通知', msgerror);
                       $("#del_confirm_modal").modal('hide');
                       $('#ipbind_list_table').bootstrapTable("refresh");

                    };
            },
            error:function(){
            }

        });
    }


　　$('#ipbind_list_table').bootstrapTable({
        url: "{% url 'ipbind_list' %}?refresh=true",
        method: 'get',
        toolbar: '#toolbar',
        striped: true,
        cache: false,
        pagination: true,                   //是否显示分页（*）
        sortable: false,                     //是否启用排序
        sortOrder: "asc",                   //排序方式
        queryParams: function (params) {
            return {
                search_value:$("#search").val(),
                pageSize: params.limit, // 每页要显示的数据条数
                offset: params.offset, // 每页显示数据的开始行号
                sort: params.sort, // 要排序的字段
                sortOrder: params.order, // 排序规则
            }
        },
        sidePagination: "server",
        pageNumber:1,
        pageSize: 20,
        pageList: [20, 30, 50],
        search: false,
        strictSearch: false,
        <!--showColumns: true,                  //是否显示所有的列-->
        <!--showRefresh: true,                  //是否显示刷新按钮-->
        minimumCountColumns: 1,             //最少允许的列数
        clickToSelect: true,                //是否启用点击选中行
        uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
        cardView: false,                    //是否显示详细视图
        detailView: false,                   //是否显示父子表
        responseHandler: responseHandler,
        formatRecordsPerPage: function (pageNumber) {
            return "每页显示" + pageNumber + "条记录";
        },
        formatShowingRows: function (pageFrom, pageTo, totalRows) {
            return "显示第" + pageFrom + "到第"+ pageTo + "条记录，总共"+ totalRows + "条记录";
        },
        columns: [{
            field: 'place',
            title: '序列',
            width: '5%',
        }, {
            field: 'ipaddr',
            title: 'IP',
            width: '8%',
        }, {
            field: 'mac',
            title: 'MAC',
            width: '25%',
            formatter: hiddenFormatter,
        }, {
            field: 'zone',
            title: '接口域',
            width: '10%',
            formatter: hiddenFormatter,
        },
         {
            field: 'note',
            title: '备注',
            width: '10%',
            formatter: hiddenFormatter,
        },
         {
            field: 'enable',
            title: '状态',
            width: '7%',
            formatter: hiddenFormatter,
        }, {
            field: 'operate',
            title: '操作',
            width: '17%',
            cellStyle:{
                css:{
                    "overflow": "inherit"
                }
            },
            align: 'center',
            events: operateEvents,
            formatter: operateFormatter
        }]
    });


    function delete_confirm(mac){
         $("#user_mac").val(mac);
         $("#del_confirm_modal").modal();
    }

    function search_filter(){
    $('#ipbind_list_table').bootstrapTable('refresh');
    }


</script>


{% endblock %}
